<template>
    <el-container style="user-select: none;min-width: 1500px;">
        <el-header>
            <div><img src="../../assets/1.png" class="image"></div>
            <div class="log-font">抖阳</div>
            <div class="search">
                <el-input placeholder="搜索你感兴趣的内容" class="input-with-select" v-model="searchValue" @keyup.enter="router.push(`/home/discover/${searchValue}`)" ></el-input>
            </div>

            <div class="avatar-div" v-if="userInfo">
                <el-dropdown>
                    <span>
                        <img src="../../assets/1.png" class="avatar-image">
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="$router.push('/home/userInfo')">我的主页</el-dropdown-item>
                            <el-dropdown-item @click="$router.push('/home/orders')">我的订单</el-dropdown-item>
                            <el-dropdown-item @click="logout()">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>

            <div v-else style="margin-left: 94%;">
                <el-button style="width: 90px;height: 40px;margin-top: 5px;" type="primary" @click="showLoginView=true">登录</el-button>
            </div>
        </el-header>
        <el-container>
            <el-aside width="10%" height="100%">
                <el-menu router style="border-right: none;margin-left: 10px;" :default-active="path.path">
                    <el-menu-item index="/home/discover">
                        <el-icon style="font-size: 26px;"><TrophyBase /></el-icon>
                        <span style="margin-left: 5px;"> 视频</span>
                    </el-menu-item>

                    <el-menu-item index="/home/live">
                        <el-icon style="font-size: 26px;"><DataLine /></el-icon>
                        <span style="margin-left: 5px;"> 直播</span>
                    </el-menu-item>

                    <el-menu-item index="/home/vip">
                        <el-icon style="font-size: 26px;"><Service /></el-icon>
                        <span style="margin-left: 5px;"> 会员</span>
                    </el-menu-item> 

                    <el-divider />

                    <el-menu-item index="/home/follow">
                        <el-icon style="font-size: 26px;"><Star /></el-icon>
                        <span style="margin-left: 5px;"> 关注</span>
                    </el-menu-item>

                    <el-menu-item index="/home/userInfo">
                        <el-icon style="font-size: 26px;"><User /></el-icon>
                        <span style="margin-left: 5px;"> 我的</span>
                    </el-menu-item>

                    <el-menu-item index="/home/orders">
                        <el-icon style="font-size: 26px;"><List /></el-icon>
                        <span style="margin-left: 5px;"> 订单</span>
                    </el-menu-item>

                    <el-divider />

                    

                    <el-menu-item index="/home/customer">
                        <el-icon style="font-size: 26px;"><ChatDotRound /></el-icon>
                        <span style="margin-left: 5px;"> 客服</span>
                    </el-menu-item>

                    <el-divider />

                    <el-menu-item @click="toAuthor()">
                        <el-icon style="font-size: 26px;"><Edit /></el-icon>
                        <span style="margin-left: 5px;"> 创作</span>
                    </el-menu-item>

                    <el-menu-item index="/home/presenter">
                        <el-icon style="font-size: 26px;"><CameraFilled /></el-icon>
                        <span style="margin-left: 5px;"> 开播</span>
                    </el-menu-item>

                    <el-menu-item @click="toAdminOrReview('reviewer')">
                        <el-icon style="font-size: 26px;"><View /></el-icon>
                        <span style="margin-left: 5px;"> 审核</span>
                    </el-menu-item>

                    <el-menu-item @click="toAdminOrReview('admin')">
                        <el-icon style="font-size: 26px;"><Key /></el-icon>
                        <span style="margin-left: 5px;"> 管理</span>
                    </el-menu-item>


                    <el-menu-item index="/home/auth/apply">
                        <el-icon style="font-size: 26px;"><OfficeBuilding /></el-icon>
                        <span style="margin-left: 5px;"> 授权</span>
                    </el-menu-item>



                </el-menu>
            </el-aside>

            <el-main >
                <div>
                    <RouterView />
                </div>
            </el-main>
        </el-container>
    </el-container>


    <el-dialog v-model="showLoginView" width="800" style="height: 500px;border-radius: 20px;background: linear-gradient(to bottom, #fbf0f2 10%, #ffffff);color: black;" center>
        <template #header>
            <h2 style="margin-top: 0px;">登录</h2>
        </template>
        <LoginView></LoginView> 
    </el-dialog>
</template>

<script setup lang="ts">
    import { ref,onMounted,watch } from 'vue'
    import { RouterView, useRoute } from 'vue-router'
    import checkLogin from '@/utils/checkLogin'
    import { ElMessage } from 'element-plus'
    import LoginView from '@/components/home/loginView.vue'
    import UserInfo from '@/types/user/UserInfo'
    import getUserInfo from '@/utils/getUserInfo'
    import checkRole from '@/utils/checkRole'
    import request from '@/base/request'
    import { useRouter } from 'vue-router'
    import { List } from '@element-plus/icons-vue'
    const router=useRouter()
    const userInfo = ref<UserInfo>()
    const showLoginView=ref(false)
    const searchValue=ref('')
    const path=router.currentRoute

    
    let html=document.documentElement
    onMounted(async ()=>{
        html.className='dark'
        userInfo.value=await getUserInfo(null)
        
    })


    const logout=async()=>{
        const response=(await request.get('/user/userBaseInfo/logout')).data
        if(response.code==200){
            ElMessage.success(response.msg)
            window.location.href='/home/discover'
        }else{
            ElMessage.error(response.msg)
        }
    }

    const toAuthor=async ()=>{
        const result=await checkLogin();
        if(result)window.open('/author/home')
        else{
            ElMessage.error('请先登录')
            showLoginView.value=true
        }
    }

    const toAdminOrReview= async (role:string)=>{
        const response= await checkRole(role)
        if(response.code===200){
            if(response.data)window.open('/'+role+'/home')
            else ElMessage.error('您无权访问，请联系管理员')
        }else if(response.code===500){
            ElMessage.error("请先登录")
            showLoginView.value=true
        }else{
            ElMessage.error(response.msg)
        }
    }
</script>

<style scoped>
    .image {
        width: 40px;
        float: left;
    }


    .el-menu-item {
        opacity: 0.5;
        height: 45px;
        width: 130px;
        overflow: hidden;
        margin-top: 2px;
    }
    .log-font {
        font-size: 20px;
        font-weight: 600;
        margin-left: 15px;
        margin-top: 6px;
        float: left;
    }  

    .el-menu-item.is-active {
        border-radius: 100px;
        background-color:rgb(34, 47, 55);
        
        opacity: 1; 
    }
    .el-menu-item:hover {
        border-radius: 100px; 
        opacity: 1;
    }

    .search{
        margin-left: 500px;
        margin-top: 6px;
        float: left;
    }

    .input-with-select {
        width: 450px ;
        height: 40px ;
        border: 2px solid white ;
        border-radius: 10px ;
    }
    .avatar-div{
        margin-left: 98%;
    }
    .avatar-image {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    :deep .el-input__wrapper{
        box-shadow: none !important;
    }
</style>